<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增供应商')" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-supplier-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">供应商名称：</label>
                <div class="col-sm-8">
                    <input name="name" id="name" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">负责人：</label>
                <div class="col-sm-8">
                    <input name="charge" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">电话：</label>
                <div class="col-sm-8">
                    <input id="phoneNumber" name="phoneNumber" class="form-control isPhone" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">合同供煤数量：</label>
                <div class="col-sm-8">
                    <input name="contractNumber" class="form-control number" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">账号：</label>
                <div class="col-sm-8">
                    <input name="loginName" id="loginName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">密码：</label>
                <div class="col-sm-8">
                    <input name="loginPassword" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">收款二维码：</label>
                <input name="qrCode" id="qrCode" class="form-control" type="hidden">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="qr_btn">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="qr_img">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </form>
        <div class="box-footer">
            <div class="col-sm-offset-5 col-sm-6">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>提交</button>&nbsp;
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jasny-bootstrap-js" />
    <script th:inline="javascript">
        var prefix = ctx + "jjm/supplier"


        $("#form-supplier-add").validate({
            onkeyup: false,
            rules:{
                name:{
                    minlength: 2,
                    maxlength: 50,
                    remote: {
                        url: prefix+"/checkNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            "name": function() {
                                return $.common.trim($("#name").val());
                            }
                        },
                        dataFilter: function(data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
                loginName:{
                    minlength: 2,
                    maxlength: 20,
                    remote: {
                        url: "/system/user/checkLoginNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            "loginName": function() {
                                return $.common.trim($("#loginName").val());
                            }
                        },
                        dataFilter: function(data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
                password:{
                    minlength: 5,
                    maxlength: 20
                }
            },
            messages: {
                "name": {
                    remote: "供应商已经存在"
                },
                "loginName": {
                    remote: "用户已经存在"
                }
            },
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-supplier-add').serialize());
            }
        }


        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#qr_btn'
                , url: '/common/upload' //改成您自己的上传接口
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#qr_img').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    console.log(res)
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    $("#qr_img").attr(res.fileName);
                    $("#qrCode").val(res.fileName);
                }
                , error: function () {
                    //上传失败，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>
</body>
</html>